<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<base href="<%=basePath%>"/>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>配料列表</title>
		<link rel="stylesheet" href="res/layui/css/layui.css">
		<script src="res/js/jquery-2.1.4.min.js" type="text/javascript" ></script>
		<script src="res/layui/layui.js"></script>
	</head>
	<body>
	<div style="padding-top: 10px;margin-bottom: -10px;">
		
		配料的名称：
		<div class="layui-inline" style="width: 140px;">
			<input class="layui-input" name="dosName" id="dosName"
				autocomplete="off">
		</div>
		
		<button class="layui-btn" data-type="reload" onclick="reloadData()">搜索</button>
		<button data-type="auto" class="layui-btn layui-btn-normal"
			onclick="showAddOrUpdate()">新增</button>
		
		
	</div>
	<table class="layui-table" id="department" lay-filter="demo"></table> 
	
	
	<script type="text/html" id="demo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	<script type="text/javascript">
		var table;

		var loadIndex;

		var openIndex;
		
		function showAddOrUpdate(dosId) {
			var url;
			
			if (dosId != null) {
				url = "pages/dosingadd.jsp?dosId=" + dosId;
			} else {
				url = "pages/dosingadd.jsp";
			}
			openIndex = layer.open({
				type : 2//样式
				,
				skin : 'layui-layer-molv'//样式
				,
				area : [ '85%', '70%' ],
				title : "配料表维护"//标题
				,
				id : 'mesFrom' //防止重复弹出
				,
				content : url,
				shade : [ 0.8, '#393D49' ] //显示遮罩
				,
				shadeClose : true//点击也能遮罩层关闭
				,
				anim : 2
			//弹出动画 
			});
		}

		function deleteRec(dosId, i) {
			var url = "dosing/deletedosing.action";
			
			$.post(url, {
				"dosId" : dosId
			}, function(info) {
				layer.msg(info.mes);
				layer.close(i);
			});
		}

		layui.use([ 'table' ], function() {   

			table = layui.table;
			loadIndex = layer.load();
			//方法级渲染
			table.render({
				loading : true,
				id : 'dosId',
				page : true,
				height : 383,
				size : "sm",
				elem : '#department',
				url : 'dosing/selectAll.action',
				method : 'post',
				where : {

				},
				cols : [ [ {
					field : 'dosNumber',
					title : '配料编号',
					width : 100,
					align : 'center',
					sort : true
				},{
					field : 'applyName',
					title : '供货商名称',
					width : 100,
					align : 'center',
					sort : true
				},{
					field : 'dosName',
					title : '配料的名称',
					width : 150,
					align : 'center',
					sort : true
				}, {
					field : 'dosJc',
					title : '配料的简称',
					width : 100,
					align : 'center',
					sort : true
				}, {
					field : 'dosSalarysSalary',
					title : '配料的价格',
					width : 100,
					align : 'center',
					sort : true
				}, {
					fixed : 'right',
					width : 160,
					align : 'center',
					toolbar : '#demo'
				} ] ]

				,
				done : function(res, curr, count) {
					layer.close(loadIndex);//加载层关闭  
					var jsonStr = JSON.stringify(res);
					$("#jsonStr").val(jsonStr);
				}
			});

			//监听工具条
			table.on('tool(demo)', function(obj) {
				var data = obj.data;
				if (obj.event === 'del') {
					layer.confirm('真的删除行么', function(index) {
						var i = layer.load();
						deleteRec(data.dosId, i);
						obj.del();
						layer.close(index);
					});
				} else if (obj.event === 'edit') {
					showAddOrUpdate(data.dosId);
				}
			});
			
			$('.demoTable .layui-btn').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});
		});
		
		function reloadData(){
			table.reload('dosId', {
				where : {
					'dosName' : $("#dosName").val()			
				}
			});
		}
		
	</script>
</body>
</html>